import React from 'react';
import { Container, Button } from 'react-bootstrap';
import { CSSTransition } from '../react-transition-group';
import './index.css';
const duration = 2000;
function TransitionPage() {
  const [inProp, setInProp] = React.useState(false);
  return (
    <Container>
      <CSSTransition in={inProp} timeout={duration} classNames="fade">
        <button className="fade"
          style={{ width: '100px', height: '50px', backgroundColor: 'green', color: 'white' }}>
          fade
        </button>
      </CSSTransition>
      <hr />
      <button onClick={() => setInProp(!inProp)}>{inProp ? 'hide' : 'show'}</button>
    </Container>
  )
}
export default TransitionPage;